<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test dgrid/selector module</title>

		<link rel="stylesheet" href="../../../css/dgrid.css">

		<style>
			.dgrid {
				height: 12em;
				margin-bottom: 3em;
			}

			.dgrid .field-select {
				width: 3em;
			}

			.dgrid .field-col1,
			.dgrid .field-col2,
			.dgrid .field-col5 {
				width: 8em;
			}

			.gridContainer {
				vertical-align: top;
				width: 500px;
			}
		</style>
	</head>

	<body class="claro">
		<table>
			<tr>
				<td class="gridContainer">
					<h3>Extended selectionMode</h3>
					<div id="gridExtended"></div>

					<h3>Multiple selectionMode</h3>
					<div id="gridMultiple"></div>

					<h3>Single selectionMode</h3>
					<div id="gridSingle"></div>
				</td>

				<td class="gridContainer">
					<h3>Toggle selectionMode</h3>
					<div id="gridToggle"></div>

					<h3>None selectionMode</h3>
					<div id="gridNone"></div>
				</td>
			</tr>
		</table>


		<script>
			var dojoConfig = {
				async: true,
				baseUrl: "../../../../",
				packages: [
					"dojo",
					"dijit",
					"dojox",
					"dgrid",
					"put-selector",
					"xstyle"
				],
			};
		</script>

		<script src="../../../../dojo/dojo.js"></script>

		<script>
			var gridExtended;
			var gridMultiple;
			var gridSingle;
			var gridToggle;
			var gridNone;
			var ready = false;

			require([
				"dojo/_base/declare",
				"dojo/_base/lang",
				"dgrid/OnDemandGrid",
				"dgrid/Selection",
				"dgrid/selector",
				"dgrid/test/data/base"
			], function (declare, lang, OnDemandGrid, Selection, selector, testStore) {
				var SelectionGrid = declare([OnDemandGrid, Selection]);

				function allowSelect(row) {
					return !row.id || row.id % 2 === 0;
				}
				
				function createGrid(selectionMode) {
					var id = "grid" + selectionMode.slice(0, 1).toUpperCase() + selectionMode.slice(1),
						selectorConfig = {
							label: "Select"
						};
					
					if (selectionMode === "single") {
						selectorConfig.selectorType = "radio";
					}
					
					return new SelectionGrid({
						sort: "id",
						store: testStore,
						columns: {
							select: selector(selectorConfig),
							col1: "Column 1",
							col2: "Column 2",
							col5: "Column 5"
						},
						selectionMode: selectionMode,
						allowSelect: allowSelect,
						allowSelectAll: selectionMode !== "single"
					}, id);
				}
				
				gridExtended = createGrid("extended");
				gridMultiple = createGrid("multiple");
				gridSingle = createGrid("single");
				gridToggle = createGrid("toggle");
				gridNone = createGrid("none");

				ready = true;
			});
		</script>
	</body>
</html>